<template>
  <view class="digest-item" @click="handleClick">
    <view class="digest-content">
      <view class="digest-title">{{ title }}</view>
      <view class="digest-summary">{{ summary }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
interface Props {
  id: number
  title: string
  summary: string
}

const props = defineProps<Props>()

const emit = defineEmits<{
  click: [id: number]
}>()

const handleClick = () => {
  emit('click', props.id)
}
</script>

<style lang="scss" scoped>
.digest-item {
  width: 300rpx;
  height: 300rpx;
  background: #fff;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: inline-flex;
  flex-direction: column;
  box-sizing: border-box;
  white-space: normal;
  
  &:active {
    transform: scale(0.98);
    background: #f8f8f8;
  }
}

.digest-content {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  height: 100%;
}

.digest-title {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.digest-summary {
  font-size: 24rpx;
  color: #666;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
</style>